<script setup>
import {ref} from 'vue'
import {UserOutlined, PhoneOutlined, SendOutlined} from "@ant-design/icons-vue";
import {validateMobile, validateNull} from "@/utils/validate.js";
import { getRegionApi, addAddressApi, editAddressApi } from '@/api'
import {message} from "ant-design-vue";

const emit = defineEmits(["confirm"])
const props = defineProps(['title', 'tips'])
const visible = ref(false)
const formRef = ref();
const formData = ref({
  name: '',
  phone: '',
  region: '',
  is_default: '',
  addr: '',
});
// 区域列表
const regionList = ref([])
const rules = {
  name: [{validator: validateNull, trigger: 'blur'}],
  phone: [{validator: validateMobile, trigger: 'blur'}],
  region: [{validator: validateNull, trigger: 'blur'}],
  addr: [{validator: validateNull, trigger: 'blur'}],
};
const placeholder = ref('请选择地址');
// 动态加载子节点
const loadData = selectedOptions => {
  const targetOption = selectedOptions[selectedOptions.length - 1];
  targetOption.loading = true;
  getRegionApi({region: targetOption.value}).then((res) => {
    if (res[0].value[res[0].value.length - 1] === '0') res.forEach(item => {
      item.isLeaf = false
    })
    targetOption.children = res
    regionList.value = [...regionList.value]
  })
}
// 选中区域
const regionChange = (e) => {
  formData.value.region = e[e.length - 1]
}
// 提交
const confirm = () => {
  formRef.value.validate().then(() => {
    const params = {
      ...formData.value
    }
    addAddressApi(params).then(res => {
      message.success('添加成功')
      emit('confirm')
      close()
    }).catch(err => {
      message.error(err.msg)
    })
  }).catch((err) => {
  })
}
const open = (params) => {
  if (params) {
    const { id, name, phone, is_default, addr, region, modify_region } = params
    formData.value = {
      is_default,
      name,
      phone,
      addr,
      region,
      id
    }
    placeholder.value = modify_region.name
  } else {
    formData.value = {
      name: '',
      phone: '',
      is_default: '',
      addr: '',
      region: '',
    }
    placeholder.value = '请选择地址'
  }
  visible.value = true
  document.body.style.overflow = 'hidden'
  getRegionApi().then((res) => {
    regionList.value = res
    regionList.value.forEach((item) => {
      item.isLeaf = false
    })
  })
}
const close = () => {
  visible.value = false
  document.body.style.overflow = 'auto'
}
defineExpose({
  open,
  close
})
</script>

<template>
  <a-modal :destroyOnClose="false" :title="title" v-model:open="visible" @cancel="close" centered :closable="false" :footer="null">
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      labelAlign="right"
    >
      <a-form-item name="name" label="收 货 人">
        <a-input v-model:value="formData.name" autocomplete="off" placeholder="请输入收货人姓名">
          <template #prefix>
            <UserOutlined/>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="phone" label="联系方式">
        <a-input v-model:value="formData.phone" autocomplete="off" placeholder="请输入收货人联系方式">
          <template #prefix>
            <PhoneOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="region" label="收货地址">
        <a-cascader
          :options="regionList"
          :load-data="loadData"
          :placeholder="placeholder"
          @change="regionChange"
        />
      </a-form-item>
      <a-form-item name="addr" label="详细地址">
        <a-input v-model:value="formData.addr" autocomplete="off" placeholder="请输入详细地址">
          <template #prefix>
            <SendOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="is_default" label="设为默认">
        <a-switch v-model:checked="formData.is_default" checkedValue="1" unCheckedValue="0"/>
      </a-form-item>
    </a-form>
    <div class="btn-box">
      <a-button type="primary" style="background: var(--primary);" @click="confirm"> 提交 </a-button>
    </div>
  </a-modal>
</template>


<style scoped lang="scss">
.btn-box {
  display: flex;
  align-items: center;
  justify-content: end;
}
</style>